// var vm = new Vue({
//     el:'#demo',
//     data:{
//         firstName:'Foo',
//         lastName:'Bar',
//         fullName:'Foo Bar'
//     },
//     watch:{
//         firstName:function(val){
//             this.fullName = val +' ' + this.lastName
//         },
//         lastName:function(val){
//             this.fullName = this.firstName + ' ' + val
//         }
//     }
// })

// computed是在HTML DOM加载后马上执行的，如赋值；
// 而methods则必须要有一定的触发条件才能执行，如点击事件；

// var vm = new Vue({
//     el:'#demo',
//     data:{
//         firstName:'Foo',
//         lastName:'Bar'
//     },
//     computed:{
//         fullName:function(){
//             return this.firstName + ' ' + this.lastName
//         }
//     },
// })

var vm = new Vue({
    el:'#demo',
    data:{
        firstName:'Foo',
        lastName:'Bar'
    },
    computed:{
        fullName:{
            get:function(){
                return this.firstName + ' ' + this.lastName
            },
            set:function(newValue){
                var names = newValue.split(' ')
                this.firstName = names[0]
                this.lastName = names[names.length-1]
            }
        }
    }
})
vm.fullName='John Doe';
//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

//侦听器
var watchExampleVM = new vue({
    el:'#watch-example',
    data:{
        question:' ',
        answer:'I cannot give you answer until you ask a question'
    },
    watch:{
        question:function(newQuestion,oldQuestion){
            this.answer = 'Waiting for you to stop typing...'
            this.getAnswer()
        },
        methods:{
            getAnswer:_.debounce(
//_.debounce: 如果用手指一直按住一个弹簧，它将不会弹起直到你松手为止。
//也就是说当调用动作n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间。（空闲时间大于，设定的时间是才会执行！！！）
                function(){
                    if(this.question.indexOf('?') === -1){
                    //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
                        this.answer = 'Questions usually contain a question mark. ;-)'
                        return
                    }
                    this.answer = 'Thinking...'
                    var vm = this
                    axios.get('https//yesno.wtf/api')
                    .then(function (response){
                        vm.answer = _.capitalize(response.data.answer)
                    })
                    .catch(function (error){
                        vm.answer = 'Error! Could not reach the API.' + error
                    })
                },
                500
            )
        }
    }
})